<template>
  <div id='saleReport'>
    <div>
      数据截止时间:{{ systemTime }}
    </div>
    <div class='boxes'>
      <a-row :gutter='8'>
        <a-col :xs='24' :sm='24' :md='12' :lg='5'>
          <a-card style='min-height:100px'>
            <div class='title-text'>销售总量</div>
            <div class='title-text' style='textAlign:center'>1200</div>
          </a-card>
        </a-col>
        <a-col :xs='24' :sm='24' :md='12' :lg='5'>
          <a-card style='min-height:100px'>
            <div class='title-text'>
             增长率
            </div>
            <div class='title-text' style='textAlign:center'>1200</div>
          </a-card>
        </a-col>
        <a-col :xs='24' :sm='24' :md='12' :lg='5'>
          <a-card style='min-height:100px'>
            <div class='title-text'>前台毛利</div>
            <div class='title-text' style='textAlign:center'>50%</div>
          </a-card>
        </a-col>
        <a-col :xs='24' :sm='24' :md='12' :lg='9'>
          <a-card style='min-height:100px'>
            <div class='systom-text'>
              <div class='title-text2'>
                系统
              </div>
              <div>
                <a-select default-value='jack' style='width: 120px'>
                  <a-select-option value='jack'>
                    苏果
                  </a-select-option>
                </a-select>
              </div>
              <div>
                <a-radio-group default-value='a' button-style='solid'>
                  <a-radio-button value='a'>
                    MTD
                  </a-radio-button>
                  <a-radio-button value='b'>
                    YTD
                  </a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <div class='systom-text'>
              <div class='title-text2'>
                门店
              </div>
              <div>
                <a-checkbox-group
                  v-model='value'
                  name='checkboxgroup'
                  :options='plainOptions'
                />
              </div>
            </div>
          </a-card style=heigh:100px>
        </a-col>
      </a-row>
    </div>
    <a-card style='box-sizing:border-box'>
      <div id='myChartReach' :style="{width: '100%', height: '500px'}"></div>
      <a-table
        ref='table'
        size='middle'
        bordered
        rowKey='id'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='false'
      >
      </a-table>

    </a-card>

  </div>
</template>

<script>
import { triggerWindowResizeEvent,thousands } from '@/utils/util'
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
require('echarts/lib/component/dataZoom')
require('echarts/lib/component/graphic')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')

export default {
  name: 'inventoryReportChart',
  data() {
    return {
      value: [],
      plainOptions: ['全业态', '大业态', '小业态', '便利'],
      systemTime: '',
      dataSource: [
        {
          code13: '安徽'
        },
        {
          code13: '江苏'
        }
      ],
      columns: [
        {
          title: '组织',
          align: 'center',
          dataIndex: 'code13'
        },
        {
          title: '销售（K）',
          align: 'center',
          dataIndex: 'code14'
        },
        {
          title: '增长率',
          align: 'center',
          dataIndex: 'code34'
        },
        {
          title: '前台毛利',
          align: 'center',
          dataIndex: 'code23'
        },
        {
          title: '有POS门店数',
          align: 'center',
          dataIndex: 'code12'
        },
        {
          title: '门店单产',
          align: 'center',
          dataIndex: 'code4'
        },
        {
          title: '门店增长率',
          align: 'center',
          dataIndex: 'code3'
        },
        {
          title: '分销未达标门店',
          align: 'center',
          dataIndex: 'code2'
        },
        {
          title: '必铺品项达标率',
          align: 'center',
          dataIndex: 'code1'
        }
      ],
      myChart: null,
      option: {
        title: {
          text: '库存金额（K）    库存天数',
          textAlign: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        grid: {
          top: '12%',
          left: 0,
          right: 0,
          containLabel: true
        },
        dataZoom: [],
        xAxis: [
          {
            type: 'category',
            data: ['10-02', '10-03', '10-04', '10-05', '10-06', '10-07', '10-08', '10-09', '10-10'],
            axisPointer: {
              type: 'shadow'
            },
            boundaryGap: ['5%', '5%'],//留白大小，坐标轴两边留白
          }
        ],
        yAxis: [
          {
            type: 'value',

            axisLabel: {
              formatter: '{value}',
              margin: 18,
            },
            boundaryGap: ['5%', '5%'],//留白大小，坐标轴两边留白
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }

            }
          }

        ],
        series: [
          {
            name: '品项分销未达标门店数',
            type: 'bar',
            data: [
              1388, 2693, 2279, 1786, 2639, 2279, 1388, 1388, 1388
            ],
            itemStyle: {
              color: '#3aa1fe'
            },
            barWidth: '30%'
          },
          {
            name: '品项分销未达标门店数',
            type: 'line',
            data: [
              1388, 2693, 2279, 1786, 2639, 2279, 1388, 1388, 1388
            ],
            itemStyle: {
              color: 'red'
            }

          }
        ]
      }
    }
  },
  mounted() {

    this.$nextTick(()=>{
      setTimeout(()=>{
        this.drawLine()
      },20)
    })
    this.addDate()
  },
  methods: {
    drawLine() {
      let _this = this
      // 基于准备好的dom，初始化echarts实例
      _this.myChart = echarts.init(document.getElementById('myChartReach'))
      // 绘制图表
      _this.myChart.setOption(this.option)
    },
    addDate() {
      let nowDate = new Date()
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        h: nowDate.getHours(),
        m: nowDate.getMinutes(),
        s: nowDate.getSeconds()
      }
      date.h < 10 ? date.h = '0' + date.h : date.h
      date.m < 10 ? date.m = '0' + date.m : date.m
      date.s < 10 ? date.s = '0' + date.s : date.s
      this.systemTime = date.year + '/' + date.month + '/' + date.date + '~' + date.h + ':' + date.m + ':' + date.s
    }
  }
}
</script>

<style scoped>
#saleReport {


}

.boxes {
  width: 100%;
  margin: 20px 0 20px 0;
}

.title-text {
  margin:6px 0 ;
  font-size: 18px;
  font-weight: 700;
  width: 100%
}

.systom-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0;
}

.title-text2 {
  width: 20%;
  font-size: 16px;
  font-weight: 700;
}

/deep/ .ant-card-body {
  padding: 12px !important;
}

/deep/ .ant-checkbox + span {
  padding: 0 4px !important
}

/deep/ .ant-checkbox-group-item {
  margin: 0 !important
}

</style>